<template>
  <section>
    <h2>我是子组件</h2>
    <p>父组件传来的name: {{ name }}</p>
    <p>父组件传来的age: {{ age }}</p>
    <div>
      <button @click="(handleClick)">向父组件传参{{count}}</button>
    </div>
  </section>
</template>


<script lang="ts" setup>
import { defineProps, watch, defineEmits,ref,onMounted } from "vue";

const props = defineProps({
  name: {
    type: String,
  },
  age: {
    type: String,
  },
});

// typescript中，语法比较严谨，需要传递要触发的事件名的数组，进行注册
// 一定要在script顶层调用这些钩子函数，不要在函数内部去调用
// 等同于以前的this.$emit
const emit = defineEmits(["sendCount","sendValue"]);

watch(
  () => props.name,
  (newVal) => {
    console.log("name传参变化：", newVal);
  },
  { immediate: true }
);

const count = ref(0);

function handleClick() {
    count.value ++;
    // this.$emit("sendCout",count.value);
    emit("sendCount",count.value);
    emit("sendValue",count.value);

    
}

// 生命周期钩子函数：
// create阶段的不能使用，setup在创建之前执行，但会被挂起到创建完成之后才获取结果，所以是围绕在crate阶段
// 钩子函数全部变为onXXX
onMounted(() => {
  console.log("我挂载完成了！")
})
</script>

<style>
</style>